<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Elevation Along Paths</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var elevator;
  var map;
  var chart;
  var infowindow = new google.maps.InfoWindow();
  var polyline;

  // The following path marks a general path from Mt.
  // Whitney, the highest point in the continental United
  // States to Badwater, Death Vallet, the lowest point.
  var whitney = new google.maps.LatLng(36.578581, -118.291994);
  var lonepine = new google.maps.LatLng(36.606111, -118.062778);
  var owenslake = new google.maps.LatLng(36.433269, -117.950916);
  var beattyjunction = new google.maps.LatLng(36.588056, -116.943056);
  var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
  var badwater = new google.maps.LatLng(36.23998, -116.83171);
  
  // Load the Visualization API and the columnchart package.
  google.load("visualization", "1", {packages: ["columnchart"]});

  function initialize() {
    var myOptions = {
      zoom: 8,
      center: lonepine,
      mapTypeId: 'terrain'
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Create an ElevationService.
    elevator = new google.maps.ElevationService();

    // Draw the path, using the Visualization API and the Elevation service.
    drawPath();
  }

  function drawPath() {

    // Create a new chart in the elevation_chart DIV.
    chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));

    var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];

    // Create a PathElevationRequest object using this array.
    // Ask for 256 samples along that path.
    var pathRequest = {
      'path': path,
      'samples': 256
    }

    // Initiate the path request.
    elevator.getElevationAlongPath(pathRequest, plotElevation);
  }

  // Takes an array of ElevationResult objects, draws the path on the map
  // and plots the elevation profile on a Visualization API ColumnChart.
  function plotElevation(results, status) {
    if (status == google.maps.ElevationStatus.OK) {
      elevations = results;

      // Extract the elevation samples from the returned results
      // and store them in an array of LatLngs.
      var elevationPath = [];
      for (var i = 0; i < results.length; i++) {
        elevationPath.push(elevations[i].location);
      }

      // Display a polyline of the elevation path.
      var pathOptions = {
        path: elevationPath,
        strokeColor: '#0000CC',
        opacity: 0.4,
        map: map
      }
      polyline = new google.maps.Polyline(pathOptions);

      // Extract the data from which to populate the chart.
      // Because the samples are equidistant, the 'Sample'
      // column here does double duty as distance along the
      // X axis.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Sample');
      data.addColumn('number', 'Elevation');
      for (var i = 0; i < results.length; i++) {
        data.addRow(['', elevations[i].elevation]);
      }

      // Draw the chart using the data within its DIV. 
      document.getElementById('elevation_chart').style.display = 'block';
      chart.draw(data, {
        width: 640,
        height: 200,
        legend: 'none',
        titleY: 'Elevation (m)'
      });
    }
  }  
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div>
  <div id="map_canvas" style="width: 640px; height: 400px; float:left; border: 1px solid black;"></div>
  <div id="elevation_chart" style="width:640px; height:200px; "></div>
</div>
</body>
</html>
